<!DOCTYPE html>
<html>
<head>
    <title>100行表格</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>100行表格示例</h1>
    <table id="myTable">
        <thead>
            <tr>
                <th>行号</th>
                <th>数据1</th>
                <th>数据2</th>
                <th>数据3</th>
            </tr>
        </thead>
        <tbody id="tableBody">
            <!-- 表格内容将通过JavaScript动态生成 -->
        </tbody>
    </table>

    <script>
        // 获取表格主体元素
        const tableBody = document.getElementById('tableBody');
        
        // 初始化行计数器
        let rowCount = 1;
        
        let rowNumSet = +prompt("请输入要输出的表格行")
        // 使用while循环生成100行
        while (rowCount <= rowNumSet) {

            // 创建新行
            const row = document.createElement('tr');
            
            // 创建单元格并填充数据
            const cell1 = document.createElement('td');
            cell1.textContent = rowCount;
            
            const cell2 = document.createElement('td');
            cell2.textContent = `数据A-${rowCount}`;
            
            const cell3 = document.createElement('td');
            cell3.textContent = `数据B-${rowCount}`;
            
            const cell4 = document.createElement('td');
            cell4.textContent = `数据C-${rowCount}`;
            
            // 将单元格添加到行中
            row.appendChild(cell1);
            row.appendChild(cell2);
            row.appendChild(cell3);
            row.appendChild(cell4);
            // 将行添加到表格主体中
            tableBody.appendChild(row);
            
            // 增加行计数器
            rowCount++;
        }
    </script>
</body>
</html>